<template>
	<!-- v-if="detailList.goods_name" 这个判断解决于页面编译刚刷入时，价格会先显示undefined -->
	<view class="goods-detail" v-if="detailList.goods_name">
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item, index) in detailList.pics" :key="index">
				<image :src="item.pics_big" @click="open(item)"></image>
			</swiper-item>
		</swiper>
		<view class="detail-info">
			<text class="price">￥ {{ detailList.goods_price }}</text>
			<view class="des">
				<text class="left">{{ detailList.goods_name }}</text>
				<view class="right">
					<uni-icons type="star" size="20" color= "gray"></uni-icons>
					<text class="word">收藏</text>
				</view>
			</view>
			<text class="bottom">快递：免运费</text>
		</view>
		<!-- 展示dom块 用 rich-text -->
		<!-- <view class="introduce" v-html="detailList.goods_introduce"></view> -->
		<rich-text :nodes="detailList.goods_introduce"></rich-text>
		<!-- 底部导航组件 -->
		<view class="goods-nav">
			<uni-goods-nav :fill="true"  :options="options" :buttonGroup="buttonGroup"  @click="onClick" @buttonClick="buttonClick" />
		</view>
	</view>
</template>

<script>
	import { mapState, mapMutations, mapGetters } from 'vuex'
	export default {
		data() {
			return {
				detailList: {},
				options: [ // 左侧按钮
					{
							icon: 'shop',
							text: '店铺'
					}, {
							icon: 'cart',
							text: '购物车',
							info: 0
					},
				],
				buttonGroup: [ // 右侧按钮
					{
					  text: '加入购物车',
					  backgroundColor: '#ff0000',
					  color: '#fff'
					},
					{
					  text: '立即购买',
					  backgroundColor: '#ffa200',
					  color: '#fff'
					}
				]
			};
		},
		computed: {
			// 调用 mapState 方法，把 m_cart 模块中的 cart 数组映射到当前页面中，作为计算属性来使用
			// ...mapState('模块的名称'， ['要映射的数据名称1'， '要映射的数据名称2'])
			...mapState('m_cart', []),
			...mapGetters('m_cart', ['total'])
		},
		watch: {
			// 'total'(newVal) {
			// 	const result = this.options.find(item => item.text === '购物车')
			// 	console.log(result, newVal)
			// 	result.info = newVal
			// }
			// 修改为页面初次加载完毕后立即调用
			// 修改前，页面首次加载后不会被调用，导致购物车的小圆点数量没有展示到商品导航区域
			total: {
				handler(newVal) {
					const result = this.options.find(item => item.text === '购物车')
					console.log(result, newVal)
					result.info = newVal
				},
				immediate: true
			}
		},
		onLoad(options) {
			const goods_id = options.goods_id
			this.getDetailList(goods_id)
		},
		methods: {
			...mapMutations('m_cart', ['addToCart']),
			async getDetailList(goods_id) {
				const { data } = await uni.$http.get('/api/public/v1/goods/detail', {goods_id})
				if(data.meta.status !== 200) return uni.$showMsg()
				this.detailList = data.message
				// 因为rich-text中的img标签内 图片展示之间存在空白1px区域，要加display: block可以解决，
				// 所以要用正则将 <img 替换为 <img style="display: block;"
				data.message.goods_introduce = data.message.goods_introduce.replace(/<img /g, '<img style="display: block;" ').replace(/webp/g, 'jpg')
				// ios对webp的图片不是很友好，展示不出来，所以要换
			},
			open(item) {
				// 预览图片方法
				uni.previewImage({
					// 预览时，默认显示图片的索引
					current: item,
					// 所有图片url地址的数组
					urls: this.detailList.pics.map(v => v.pics_big)
				})
			},
			// 左侧按钮区域事件
			onClick(e) {
				const { text } = e.content
				if(text==='购物车') {
					uni.switchTab({
					url: '/pages/cart/cart'
					})
				}
			},
			// 右侧按钮区域事件
			buttonClick(e) {
				const { text } = e.content
				if(text==='加入购物车') {
					const goods = {
						goods_id: this.detailList.goods_id, 
						goods_name: this.detailList.goods_name, 
						goods_price: this.detailList.goods_price, 
						goods_count: 1, 
						goods_small_logo: this.detailList.goods_small_logo, 
						goods_state: true
					}
					this.addToCart(goods)
				}
			}
		}
	}
</script>

<style lang="scss">
.goods-detail {
	padding-bottom: 50px;
	swiper {
		height: 750rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.detail-info {
		padding: 10px;
		.price {
			color: red;
			font-size: 18px;
		}
		.des {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 12px;
			margin: 10px 0;
			.left {
				width: 90%;
				border-right: #efefef 1px solid;
				padding-right: 10px;
			}
			.right {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 10%;
				color: gray;
				padding-left: 10px;
			}
		}
		.bottom {
			color: gray;
			font-size: 12px;
		}
	}
	.goods-nav {
		position: fixed;
		bottom: 0;
		width: 100%;
	}
}
</style>
